import * as AntdIcons from '@ant-design/icons';
import './index.scss';

// 创建一个过滤后的图标集合，只包含有效的组件类型
const ValidAntdIcons = Object.entries(AntdIcons).filter((icon: any) => icon[1].render).map((icon) => icon[0]);
interface IProps {
    iconClass: string;
    svgClass?: string;
    fill?: string;
    style?: React.CSSProperties;
    onClick?: React.MouseEventHandler;
    size?: number;
}

function SvgIcon(props: IProps) {
    const { iconClass, fill, svgClass, size = 16, style, onClick } = props;
    // 判断是否为 Ant Design 图标
    // 判断是否为有效的 Ant Design 图标
    const isValidAntdIcon = ValidAntdIcons.includes(iconClass);

    // 判断是否为 iconfont 图标
    const isIconfontIcon = iconClass.includes('icon-');

    // 尺寸样式
    const sizeStyle: React.CSSProperties = {
        width: `${size}px`,
        height: `${size}px`,
        lineHeight: `${size}px`,
        fontSize: `${size}px`,
        ...style,
    };

    // 额外样式
    const extraStyle: React.CSSProperties = {
        color: fill,
        fill: fill,
        ...sizeStyle,
    };

    // 渲染 Ant Design 图标
    if (isValidAntdIcon) {
        // 安全获取图标组件
        const IconComponent = (AntdIcons as any)[iconClass];

        return (
            <IconComponent
                className={`antd-icon ${svgClass || ''}`}
                style={extraStyle}
                onClick={onClick}
            />
        );
    }

    // 渲染 iconfont 图标
    if (isIconfontIcon) {
        return (
            <i
                className={`iconfont ${iconClass} ${svgClass || ''}`}
                style={extraStyle}
                onClick={onClick}
            />
        );
    }

    // 渲染普通 SVG 图标
    return (
        <svg
            className={`svg-icon ${svgClass || ''}`}
            style={extraStyle}
            onClick={onClick}
        >
            <use xlinkHref={`#icon-${iconClass}`}></use>
        </svg>
    );
}

export default SvgIcon;